<template>
    <div class="loginRegisterManage">
        
        <div id="background">
            <div class="background_image"></div>
            
            <div class="background_overlay"></div>
            <div class="background_filter"></div>
        </div>

        <div class="container">
            <div class="contentBox">
                <div class="title">
                    <router-link to="/"class="button">
                        <span class="leftIcon iconfont icon-likesprogramshouye"></span>
                        <span class="buttonText">返回首页</span>
                    </router-link>
                    <div class="titleText">智&nbsp;&nbsp;&nbsp;&nbsp;创&nbsp;&nbsp;&nbsp;&nbsp;考&nbsp;&nbsp;&nbsp;&nbsp;题</div>
                    <router-link :to="loginUrl" v-if="showLoginUrl" class="button">
                        <span class="buttonText">前往登录</span>
                        <span class="rightIcon iconfont icon-likesprogramxiayibu"></span>
                    </router-link>
                    <router-link :to="registerUrl" v-if="!showLoginUrl" class="button">
                        <span class="buttonText">前往注册</span>
                        <span class="rightIcon iconfont icon-likesprogramxiayibu"></span>
                    </router-link>
                </div>
                <div class="content">
                    <div class="image"></div>
                    <div class="line"></div>
                    <div class="contentView">
                        <router-view/>
                    </div>
                </div>
                <!-- <div class="title">
                    <router-link to="/signin" class="button">
                        <span class="buttonText">登录页面Demo</span>
                    </router-link>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';

export default {
    name: 'loginRegisterManage',
}
</script>

<script setup lang="ts">
    const route = useRoute();
    const loginUrl = ref('/loginRegister');
    const registerUrl = ref('/loginRegister/register');
    const showLoginUrl =  computed(() => {
        console.log(route.path);
        return route.path !== loginUrl.value;
    });
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.loginRegisterManage {
    width: 100%;
    height: 100%;
}

/* 背景图片 */
.loginRegisterManage #background {
    width: 100%;
    height: 100%;
    position: absolute;
}
.loginRegisterManage #background .background_image {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/images/loginRegisterBackground.jpg");
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}
.loginRegisterManage #background .background_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
}
.loginRegisterManage #background .background_filter {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(2rem);
        -webkit-backdrop-filter: blur(2rem);
        -moz-backdrop-filter: blur(2rem);
        -ms-backdrop-filter: blur(2rem);
}

/* 页面内容布局 */
.loginRegisterManage .container {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 内容容器 */
.loginRegisterManage .container .contentBox{
    width: 1000px;
    min-width: 1000px;
    height: 600px;
    height: 600px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 5px 5px 10px 5px rgba(150, 150, 150, .3);
    background-color: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2rem);
        -webkit-backdrop-filter: blur(2rem);
        -moz-backdrop-filter: blur(2rem);
        -ms-backdrop-filter: blur(2rem);
}

.loginRegisterManage .container .contentBox .title {
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loginRegisterManage .container .contentBox .title .titleText {
    font-size: 36px;
    font-weight: bold;
	font-family: "artisticFonts";
    background-image: linear-gradient(rgb(0, 170, 236), rgb(24, 120, 190));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 2px rgba(10, 100, 255, 0.3);
}

/* 标题中按钮样式 */
.loginRegisterManage .container .contentBox .title .button {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s all;
    color: rgba(65, 185, 255, 1);
}
.loginRegisterManage .container .contentBox .title .button:hover {
    color: rgb(0, 162, 255);
}

.loginRegisterManage .container .contentBox .title .button:active {
    color: rgba(65, 185, 255, 1);
    transition: .1s all;
    font-weight: lighter;
}
.loginRegisterManage .container .contentBox .title .button .iconfont {
    font-size: 20px;
    padding: 0px 5px;
}
.loginRegisterManage .container .contentBox .title .button .buttonText {
    font-size: 16px;
}
.loginRegisterManage .container .contentBox .title .button .leftIcon {
    padding-left: 5px;
}
.loginRegisterManage .container .contentBox .title .button .rightIcon {
    padding-right: 5px;
}

/* 分隔线 */
.loginRegisterManage .container .contentBox .line {
    width: 1px;
    height: 90%;
    background-color: rgba(150, 150, 150, .5);
    margin: 0px 20px;
}

/* 内容 */
.loginRegisterManage .container .contentBox .content {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: s;
    align-items: center;
}

/* 图片 */
.loginRegisterManage .container .contentBox .content .image {
    width: calc(50% - 20px);
    height: 100%;
    background-image: url("@/assets/images/loginRegister.png");
    background-position: center;
    background-repeat: no-repeat;
}

/* 内容页面 */
.loginRegisterManage .container .contentBox .content .contentView {
    width: calc(50% - 20px);
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>